<template>
  <div id="operatelist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="帐号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.account }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row. telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="等级"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.identity == 'super'">超级管理员</span>
                        <span v-if="scope.row.identity == 'operate'">运营</span>
                        <span v-if="scope.row.identity == 'service'">客服</span>
                        <span v-if="scope.row.identity == '财务'">客服</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" align='center' width="400px" fixed="right">
                    <template slot-scope="scope"> 
                        <el-button size="mini"  type="primary" class="button_class1" plain @click="delect_but(scope.row)">删除</el-button> 
                        <el-button size="mini"  type="primary" class="button_class2" plain @click="xg_but(scope.row)">修改</el-button> 
                        <el-button size="mini"  type="primary" class="button_class1" plain @click="paw_but(scope.row)">密码</el-button> 
                        <el-button size="mini"  type="primary" class="button_class2" plain @click="pawej_but(scope.row)">二级</el-button> 
                        <el-button size="mini"  type="primary" class="button_class1" plain @click="login_but(scope.row)">登录权限</el-button> 
                    </template>
                </el-table-column>

  
            </el-table>  

  

        <el-dialog title="登录权限" :visible.sync="login_mtk"  width="300px" >
                <el-form ref="form"  label-width="100px" style="width:100%;">
                        <el-form-item label="" label-width="0px">
                            <el-select  v-model="mtk_login_form.select_num"  placeholder="请选择登录权限" style="width:100%;" @change="select_change()">
                                <el-option  v-for="(item,index) in mtk_login_form.select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                        <el-button type="primary" class="custom_color_button" style="width:100%;" @click="login_but_qr()">确认</el-button>
                        </div>
                </el-form>
        </el-dialog> 

     
   <!--修改 -->
        <el-dialog title="修改" :visible.sync="mtk"  width="600px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="0px" style="width:100%;">
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.telphone" placeholder="请输入手机号"></el-input>
                </el-form-item>  
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.username" placeholder="名称"></el-input>
                </el-form-item>
                 <el-form-item label-width="0px" >
                    <el-select  v-model="mtk_form.select_num" placeholder="请选择用户类别"  style="width:100%;">
                        <el-option  v-for="(item,index) in select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                   </el-form-item> 
                  <div style="display:flex;"> 
                    <div>选择权限 </div>
                    <div style="flex:1;margin-left:10px;">
                       <el-tree
                        :data="treedata"
                        show-checkbox     
                        :props="defaultProps"
                        highlight-current
                       :default-checked-keys="select_arr"
                        node-key="cid"
                        :check-strictly="true"
                        ref="tree"
                        @check="check">
                        </el-tree>
                       </div>
                  </div>
            </el-form>
               <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="qr_but">确认</el-button>
                 </div>
            </div> 
        </el-dialog>



           <!--修改密码 -->
        <el-dialog title="修改密码" :visible.sync="mtk_paw"  width="400px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="0px" style="width:100%;">
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_paw_form.password" placeholder="请输入密码"></el-input>
                </el-form-item>  
            </el-form>
               <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="paw_but_qr">确认</el-button>
                 </div>
            </div> 
        </el-dialog>

        <!--修改二级密码 -->
        <el-dialog title="修改二级密码" :visible.sync="mtk_pawej"  width="400px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="0px" style="width:100%;">
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_pawej_form.password" placeholder="请输入密码"></el-input>
                </el-form-item>  
            </el-form>
               <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="pawej_but_qr">确认</el-button>
                 </div>
            </div> 
        </el-dialog>


       



   </div>
</template>

<script>

export default {
   name: 'operatelist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        my_uid:'',
          mtk:false,
        mtk_form:{
          telphone:'',
          username:'',
          select_num:'super',
        },
        select_data:[{"name":"超级管理员","id":'super'},{"name":"运营","id":'operate'},{"name":"客服","id":'service'},{"name":"财务","id":'finance'}],
        treedata:[],
        defaultProps: {
          children: 'list',
          label: 'cname'
        },
        select_arr:[],  //默认选中
        select_arra:[], //选中的值
        select_arrc:'', //选中的值转字符串

        mtk_paw:false,
        mtk_paw_form:{
            password:'',
        },

        mtk_pawej:false,
        mtk_pawej_form:{
            password:'',
        },

        login_mtk:false,
        mtk_login_form:{
            select_num:'',
            select_numarr:[],
            select_data:[{"id":'1',"name":"数据查看"},{"id":"2","name":"蜜贝订单"}]
        },

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 253
  },
  mounted (){
    
  },
  methods: {
    nav_fun(){
          this.post("/cate/listOfData", {
	        }).then(res => {
            this.treedata = res.result
            console.log(res,"所有列表")
         })
      },
      check(a,b,c,d){       
          this.select_arra = b.checkedKeys.concat(b.halfCheckedKeys)
          // console.log(b.checkedKeys)
          // console.log(b.halfCheckedKeys)
           console.log(this.select_arra)
      },
    xg_but(row){
        this.my_uid  = row.uid
        this.mtk_form.telphone = row.telphone
        this.mtk_form.username =  row.username
        this.mtk_form.select_num = row.identity
        this.select_arra = row.power.split(',')
        this.select_arr = row.power.split(',')
        this.nav_fun()  
        this.mtk = true    
      },
       qr_but(){
         if(this.select_arra.length == 0){
            this.open1('请选择权限','warning')
            return false
         }else if(!this.mtk_form.telphone){
             this.open1('请输入手机号','warning')
            return false
         }else if(!this.mtk_form.username){
             this.open1('请输入名称','warning')
            return false
         }else{
          
             this.select_arrc = this.select_arra.toString()

               this.post("/manager/update", {
                uid:this.my_uid,
                telphone:this.mtk_form.telphone,
                username:this.mtk_form.username,
                identity:this.mtk_form.select_num,
                power:this.select_arrc
               }).then(res => {
                  if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                       this.mtk = false    
                      this.$emit('up_list_fun')
                  }else {
                     this.open1(res.message,'warning')
                  }

                })

         }
          
        


          console.log(this.select_arrc)   
      },
     
     paw_but(row){
          this.my_uid  = row.uid
          this.mtk_paw_form.password = ''
          this.mtk_paw = true
     },
     paw_but_qr(){
           this.post("/manager/changePwd", {
                uid:this.my_uid,
                password:this.mtk_paw_form.password
               }).then(res => {
                  if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.mtk_paw = false  
                      this.$emit('up_list_fun')
                  }else {
                     this.open1(res.message,'warning')
                  }

                })
     },
     pawej_but(row){
          this.my_uid  = row.uid
          this.mtk_pawej_form.password = ''
          this.mtk_pawej = true
     },
     pawej_but_qr(){
         this.post("/manager/changeSafePwd", {
                uid:this.my_uid,
                password:this.mtk_pawej_form.password
               }).then(res => {
                  if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.mtk_pawej = false  
                      this.$emit('up_list_fun')
                  }else {
                     this.open1(res.message,'warning')
                  }

          })
     },
     login_but(row){
         this.my_uid  = row.uid
         this.mtk_login_form.select_numarr = row.privilege_str
         this.mtk_login_form.select_num = this.mtk_login_form.select_numarr[0]
         this.login_mtk = true
     },
     login_but_qr(){       
             this.mtk_login_form.select_numarr = []
            this.mtk_login_form.select_numarr.push(this.mtk_login_form.select_num) 

            this.post("/manager/setPrivilegeForClient", {
                uid:this.my_uid,
                arr:this.mtk_login_form.select_numarr
               }).then(res => {
                  if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.login_mtk = false  
                      this.$emit('up_list_fun')
                  }else {
                     this.open1(res.message,'warning')
                  }

             })      
     },
     select_change(){
          this.mtk_login_form.select_numarr = []
     },
     delect_but(row){
         console.log(row)
         if(row.super == 1){
             this.open1('不能删除','warning')
         }else{
            
            this.$confirm('确认删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.post("/manager/delete", {
                        uid:row.uid,
                    }).then(res => {
                        if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                            this.$emit('up_list_fun')
                        }else {
                        this.open1(res.message,'warning')
                        }

                })
            }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消解冻'
        //   });          
        });
          
         }
        
     },

  }
}
</script>


<style scoped>

</style>